<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的文件夹</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<script src="js/remstyle.js"></script>
		<link rel="stylesheet" href="assets/mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/min_page.css" />
		<link rel="stylesheet" type="text/css" href="css/personal_file_list.css" />
		<script src="js/config.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="application/javascript " src="js/jquery-1.7.2.min.js "></script>
		<script src="layer/layer.js"></script>
		<link rel="stylesheet" type="text/css" href="layer/skin/layer.css" />
		<link rel="stylesheet" type="text/css" href="css/sameInfo.css" />
	</head>
	<style>
		.collect_con {
			margin-bottom: 2rem;
			width: 100%;
		}
		
		.collect_list {
			width: 100%;
			/*background: #fff;*/
			margin-bottom: 0.13rem;
			position: relative;
			overflow: hidden;
		}
		
		.choose_one {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			transition: all linear .2s;
		}
		
		input[type="checkbox"] {
			-webkit-appearance: none;
			/*清除复选框默认样式*/
			height: 22px;
			/*高度*/
			vertical-align: middle;
			width: 22px;
			border: 1px solid #a7a7a7;
			border-radius: 50%;
			margin-right: 0.1rem;
		}
		
		input[type="checkbox"]:checked {
			/*复选框的背景图，就是上图*/
			border: none;
			background: #e44e50 url(img_page/duigou.png) no-repeat center center;
			background-size: 60%;
		}
		
		.collect_list_top {
			width: 100%;
		}
		
		.collect_list_top_left {
			width: 65%;
			font-size: 0.26rem;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #484848;
			/*border: 1px solid red;*/
			min-height: 1.28rem;
		}
		
		.collect_list_top_right {
			height: 1.28rem;
			width: 100%;
			border: none !important;
			border: 1px solid black;
		}
		
		.collect_list_bottom {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		
		.collect_list_time {
			display: inline-block;
			font-size: 0.22rem;
			color: #707070;
		}
		
		.collect_list_bottom_img {
			width: auto;
			height: 0.25rem;
		}
		
		.my_page_title {
			width: 100%;
			height: 1rem;
			border-bottom: 1px solid #cdcdcd;
			background: #fff;
			padding: 0 0.24rem;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 0.26rem;
		}
		
		.my_page_title span:last-child {
			color: #1f8ff3;
		}
		
		.material_bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1rem;
			padding: 0 0.2rem;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background: white;
			border-top: 1px solid #e1e1e1;
		}
		
		.material_photo_del {
			border: none;
			width: 1.3rem;
			height: 0.6rem;
			background: #e44e50;
			margin: 0;
			padding: 0;
			line-height: 0.2rem;
			color: white;
			border-radius: 5px;
		}
		
		.my_choose_input {
			display: none;
		}
		
		.files_admin {
			cursor: pointer;
		}
		
		.my_page_bottom {
			display: none;
		}
		
		.text_status {
			border: 1px solid #eee;
			width: 24%;
			text-align: center;
			border-radius: 6px;
			color: #D3D4D3;
		}
		
		[v-cloak] {
			display: none;
		}
		
		.collecct_list_top {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		
		.collecct_list_bottom {
			width: 100%;
			height: 0.7rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		
		.collect_list_time {
			display: inline-block;
			font-size: 0.22rem;
			color: #707070;
		}
		
		.collect_list_bottom_img {
			width: auto;
			height: 0.25rem;
		}
		
		.collect_list_edit {
			width: 2.6rem;
			height: 1.8rem;
			position: absolute;
			top: 0.24rem;
			right: 0;
			z-index: 100;
			overflow-y: auto;
			transform: translate3d(2.6rem, 0, 0);
			transition: all linear .2s;
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-direction: row;
		}
		
		.open .collect_list_edit {
			transform: translate3d(0, 0, 0);
		}
		
		.open .collect_float {
			transform: translate3d(-2.6rem, 0, 0);
		}
		
		.collect_list_edit_con {
			display: flex;
			flex-direction: column;
			align-items: center;
			/*border: 1px solid red;*/
		}
		
		.collect_list_edit_top {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		.collect_love {
			width: 0.6rem;
			height: auto;
			margin-bottom: 0.1rem;
		}
		
		.no_love {
			width: 0.6rem;
			height: auto;
			margin-bottom: 0.1rem;
			/*border: 1px solid red;*/
		}
		
		.collect_top {
			width: 0.6rem;
			height: auto;
			margin-bottom: 0.1rem;
		}
		
		.my_collect {}
		
		.collect_float {
			background: #fff;
			padding: 0.24rem 0.24rem 0 0.24rem;
			box-sizing: border-box;
			/*padding: 0.24rem;
			box-sizing: border-box;*/
			overflow-y: auto;
			transition: all linear .2s;
		}
		
		#sideslip {
			border: none;
			background: none;
			display: none;
		}
	</style>

	<body>
		<div>
			<!--顶部-->
			<div class="top">
				<div class="top-one" onclick="javascript :history.back(-1);">
					<span><img src="img_page/right.png"/></span>
				</div>
				
				<div style="opacity: 0;">
					<img src="img_page/3point.png" />
				</div>
			</div>
			<!--文件夹信息-->
			<div class="files_info">
				<div class="files_info_left">
					<p>{{files_info.type_name}}</p>
					<p>共{{files_info.page_num}}篇文章</p>
				</div>
				<div class="files_info_right">
					<img src="img_page/file_edit.png" onclick="showInfoBox()" />
					<!--<img src="img_page/file_del.png" />-->
				</div>
			</div>
			<div class="my_page_title">
				<span>我的单页</span>
				<span class="files_admin">管理</span>
			</div>
			<!--我的单页内容-->
			<div class="collect_con">

				<div class="collect_list" v-cloak v-for="(v,index) in collect_list" :data-id="v.id" v-bind:class="{'open':isShow[index]}">
					<label class="choose_one ">
		<input class="my_choose_input" name="choose_one" value="male" style="margin-top: 11%;" type="checkbox" />
		<div class="collect_float" style="width: 100%;">
	<div class="collecct_list_top">
		<div class="collect_list_top_left" @click="page_details(v.id)">
			<span v-if="v.title!=null">{{v.title}}</span>
			<span v-if="v.title==null">这里是标题</span>
			<!--<span class="text_status" v-if="v.status==0">草稿箱</span>-->
			<span class="text_status" v-if="v.status==0">审核中</span>
			<span class="text_status" v-if="v.status==1">已发布</span>
			<span class="text_status" v-if="v.status==2">未通过</span>
		</div>

		<div style="width: 28%;height: 1.28rem;">
			<img v-if="v.img_url!=null" class="collect_list_top_right" :src="v.img_url" />
		</div>
	</div>
	<div class="collecct_list_bottom">
		<span class="collect_list_time">{{v.create_time}}</span>
		<button class="sideslip" id="sideslip" @click="open_cb(index)"><img class="collect_list_bottom_img" src="img_page/collect_right.png"/></button>
	</div>
</div>
   <div class="collect_list_edit" v-show="isShow">
	<div class="collect_list_edit_con" v-on:click="details_collect(index,v.id)" v-bind:class="{'myactive':isActive[index]}">

		<img v-if="isActive[index]==true"  class="collect_love" src="img_page/collect_love.png" />
		<img v-if="isActive[index]==false" class="no_love"  src="img_page/no_collect.png" />
		<span v-if="isActive[index]==false" class="no_collect">收藏</span>
		<span v-if="isActive[index]==true" class="my_collect">取消收藏</span>
	</div>
	<div class="collect_list_edit_top" v-on:click="top_on(index,v.id)" v-bind:class="{'mytop':isTop[index]}">
		<img class="collect_top" src="img_page/collect_top.png" />
		<span v-if="isTop[index]==false" >置顶</span>
		<span v-if="isTop[index]==true">取消置顶</span>
	</div>

</div>
  
					
</label>

				</div>
				<div class="list_no_more">---- 没有更多了 ----</div>
			</div>

			<!--底部-->
			<div class="my_page_bottom">
				<div class="material_bottom">
					<label class="single" onclick="choose_all(this)"><input type="checkbox" name="choose_all" value="male" />全选</label>
					<button class="material_photo_del" onclick="del_all()">删除</button>
				</div>
			</div>
			<!--遮罩层-->
			<div id="bgMask" class="bg"></div>
			<!--灰度背景-->
			<!--弹出层内容-->
			<div id="infoBox" style="" class="infobox_bg">
				<div class="infobox_title">重命名文件夹</div>
				<input class="infobox_input" placeholder="1-16个字符" id="files_name" /><br />

				<div class="infobox_bottom">
					<button onclick="hideInfoBox();">取消</button>
					<button onclick="sureInfoBox();">确定</button>
				</div>
			</div>
			<div class="go_page_top" id="return-top">
				<img src="img_page/go_top.png" />
			</div>
		</div>
	</body>
	<script>
		$(function() {
			$('#return-top').hide();
			$(function() {
				$(window).scroll(function() {
					if($(window).scrollTop() > 300) {
						$('#return-top').fadeIn(300);
					} else {
						$('#return-top').fadeOut(200);
					}

				});
				$('#return-top').click(function() {

					$('body,html').animate({
						scrollTop: 0
					}, 300);
					return false;

				})

			})

		})

		/**遮罩层弹出与隐藏*/
		//记录是否阻止滚动
		var disableScroll = false;

		//如果弹出对话框时，底层的视图就不让滚动了
		document.addEventListener('touchmove', function(e) {
			if(disableScroll) {
				e.preventDefault();
			}
		}, false); //显示弹出框
		function showInfoBox() {
			console.log(2222)
			//禁止滚动
			disableScroll = true;
			//显示背景遮罩
			document.getElementById("bgMask").style.display = "block";
			//显示消息弹出框
			document.getElementById("infoBox").style.display = "block";
			var files = file_info.files_info;

			$("#files_name").val(files.type_name);
		}

		//隐藏弹出框
		function hideInfoBox() {
			//允许滚动
			disableScroll = false;
			//隐藏背景遮罩
			document.getElementById("bgMask").style.display = "none";
			//隐藏消息弹出框
			document.getElementById("infoBox").style.display = "none";
		}
		//复选框的显示与隐藏
		$('.files_admin').toggle(
			function() {
				console.log(44444)
				$('.files_admin').html('完成')
				$('.my_choose_input').css({
					"display": "block"
				})
				$('.my_page_bottom').css({
					"display": "block"
				})
				//					$('.collect_list_edit').css({
				//						"display": "none"
				//					})
				$('.sideslip').css("display", "none");
				var isShow = collect_list.isShow;
				var arr = new Array();
				for(var i = 0; i < isShow.length; i++) {
					arr[i] = false;
				}
				collect_list.isShow = arr;
				console.log(isShow);
			},
			function() {
				$('.files_admin').html('管理')
				$('.my_choose_input').css({
					"display": "none"
				})
				$('.my_page_bottom').css({
					"display": "none"
				});

				$('.sideslip').css("display", "block");

			})
		//点击确定
		function sureInfoBox() {

			$(".infobox_input")[0].focus();
			var type_name = document.getElementById("files_name").value;
			var infobox_input = $(".infobox_input").val().replace(/(^\s*)|(\s*$)/g, "");
			if(infobox_input == null || infobox_input == "") {
				layer.msg('输入框不能为空', {
					time: 1500
				});
				return false;
			} else if(infobox_input.length > 16) {
				layer.msg('文件名不能超过16位', {
					time: 1500
				});
			} else {
				$.ajax({
					type: "get",
					url: v_url + "/wechat/singlepage/updateMyFile",
					data: {
						type_name: type_name,
						type_id: file_info.files_info.type_id,
						c_user_id: c_user_id
					},
					async: false,
					success: function(res) {
						if(res.code = 200) {
							//隐藏背景遮罩
							document.getElementById("bgMask").style.display = "none";
							//隐藏消息弹出框
							document.getElementById("infoBox").style.display = "none";
							console.log("成功");

							var obj = res.data;

							file_info.files_info = obj

							//window.location.reload();
						}

					},
					error: function(request) {
						console.log("链接失败")
					}

				});
			}
			//允许滚动
			disableScroll = false;
		}
		console.log(v_param);
		var file_info = new Vue({
			el: '.files_info',
			data: {
				files_info: [],
			},
			created: function() {
				this.getList();
			},
			methods: {
				getList: function() {
					console.log("11111");

					var that = this;
					$.ajax({
						type: "get",
						url: v_url + "/wechat/singlepage/getMyFileById",
						data: {
							type_id: v_param,
							c_user_id: c_user_id
						},
						async: true,
						success: function(res) {
							//console.log(res.data,123)
							that.files_info = res.data;
						}
					});

				}

			}

		})
		var ids = '';

		function del_all() {
			var lab_name = document.getElementsByName('choose_one')
			for(var i = 0; i < lab_name.length; i++) {
				if(lab_name[i].checked) {
					var id = $(lab_name[i]).parent().parent().attr("data-id");
					if(ids) {
						ids = ids + "," + id;
					} else {
						ids = id
					}
				}

			}
			console.log(ids)
			if(!ids) {
				layer.msg('请至少选择一个')
			} else {
				layer.confirm("确认要删除吗？", {
						btn: ['确定', '取消']
					},
					function() {
						$.ajax({
							type: "get",
							url: v_url + "/wechat/singlepage/deletePages",
							data: {
								ids: ids,
								c_user_id: c_user_id
							},
							async: true,
							success: function(res) {
								if(res.code == 200) {
									layer.msg("删除成功", function() {
										window.location.reload()
									})
								} else {
									layer.msg("删除失败")
								}
							}
						});
					})
			}
		}

		function choose_all(obj) {
			var dom = $(obj).find("input");

			$(".choose_one").each(function(i) {
				var dom2 = $(this).find("input");
				dom2.prop("checked", dom.prop("checked"));
			});

		}
		//		$('#sideslip').click(function() {
		//			console.log(33333)
		//			$('body').toggleClass('open');
		//		});
		//		$(".collect_list_edit_con").toggle(function() {
		//				$('.collect_love').css({
		//					"display": "none"
		//				});
		//				$('.my_collect').css({
		//					"display": "block"
		//				});
		//				$('.no_collect').css({
		//					"display": "block"
		//				});
		//				$('.no_love').css({
		//					"display": "none"
		//				})
		//			},
		//			function() {
		//				$('.collect_love').css({
		//					"display": "block"
		//				});
		//				$('.my_collect').css({
		//					"display": "none"
		//				});
		//				$('.no_collect').css({
		//					"display": "none"
		//				});
		//				$('.no_love').css({
		//					"display": "block"
		//				})
		//			}
		//
		//		)
		var collect_list = new Vue({
			el: '.collect_con',
			data: {
				collect_list: [],
				pages: 1,
				isShow: true,
				isActive: false,
				isTop: false
				//current:""
			},
			created() {
				this.getList();
				window.addEventListener('scroll', this.onScroll);
			},
			methods: {
				onScroll() {
					//可滚动容器的高度
					var that = this;

					let innerHeight = document.querySelector('.collect_con').clientHeight; //屏幕尺寸高度
					let outerHeight = document.documentElement.clientHeight; //可滚动容器超出当前窗口显示范围的高度
					var scrollTop;
					if(typeof window.pageYOffset != 'undefined') { //pageYOffset指的是滚动条顶部到网页顶部的距离
						scrollTop = window.pageYOffset;
					} else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
						scrollTop = document.documentElement.scrollTop;
					} else if(typeof document.body != 'undefined') {
						scrollTop = document.body.scrollTop;
					}

					console.log(innerHeight + " " + outerHeight + " " + scrollTop);
					if(innerHeight < (outerHeight + scrollTop)) { //加载更多操作
						console.log("加载中");
						//this.items += 10;

						that.pages = ++that.pages
						that.getList()
						//layer.closeAll();
					}
				},
				getList() {
					console.log("11111");
					layer.load("加载中");

					var that = this;
					$.ajax({
						type: "get",
						url: v_url + "/wechat/singlepage/getPageListByType",
						data: {
							type_id: v_param,
							page: that.pages,
							rows: '10',
							c_user_id: c_user_id
						},
						async: true,
						success: function(res) {
							var list = res.data;
							var new_collect_list = [];
							for(var i = 0; i < list.length; i++) {
								new_collect_list.push(list[i]);
								var create_time = list[i]["create_time"];
								var dateee = new Date(create_time).toJSON();
								var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
								new_collect_list[i]["create_time"] = date;

							}
							console.log((new_collect_list),888)
							//							that.collect_list = list
							layer.closeAll();
							//that.collect_list = list
							var new_collect_list = that.collect_list;
							if(list && list.length != 0) {

								for(var i = 0; i < list.length; i++) {
									new_collect_list.push(list[i]);
								}
								that.collect_list = new_collect_list
								console.log(new_collect_list);
								if(list.length < 10) {

								}
							}
							var arr = new Array();
							var isActive = new Array();
							for(var i = 0; i < new_collect_list.length; i++) {
								arr.push(false);
								if(new_collect_list[i].ifcollection) {
									isActive.push(true);
								} else {
									isActive.push(false);
								}

							}
							var Toparr = new Array();
							var isTop = new Array();
							for(var i = 0; i < new_collect_list.length; i++) {
								Toparr.push(false);
								if(new_collect_list[i].roof_placement) {
									isTop.push(true);
								} else {
									isTop.push(false);
								}

							}
							console.log(new_collect_list);
							that.isShow = arr;
							that.isActive = isActive
							that.isTop = isTop
							//console.log(that.collect_list);

						}
					});

				},

				page_details(id) {
					var list_html = $('.files_admin').html()
					if(list_html == '管理') {
						window.location.href = "page_text_details.html?url=" + id + '&c_user_id=' + c_user_id
					}

				},
				details_collect(index, id) {
					console.log(index);
					var isActive = this.isActive;
					console.log(isActive.length)
					var arr = new Array();
					$(isActive).each(function(i) {
						arr.push(isActive[i]);
					});

					arr[index] = !isActive[index];
					this.isActive = arr
					$.ajax({
						type: "get",
						url: v_url + "/wechat/collection/toCollection",
						data: {
							page_id: id,
							c_user_id: c_user_id
						},
						async: false,
						success: function(res) {
							if(res.code == 200) {
								console.log("收藏成功")
							}

						}
					});
				},
				top_on(index, id) {
					//console.log(index);

					var isTop = this.isTop;
					//console.log(isTop.length)
					var arr = new Array();
					$(isTop).each(function(i) {
						arr.push(isTop[i]);
					});

					arr[index] = !isTop[index];
					this.isTop = arr;
					var roof_placement = ''
					if(isTop[index] == false) {
						roof_placement = '0'
					} else {
						roof_placement = '1'
					}
					console.log(roof_placement)
					$.ajax({
						type: "get",
						url: v_url + "/wechat/singlepage/savePage",
						data: {
							id: id,
							roof_placement: roof_placement,
							c_user_id: c_user_id
						},
						async: true,
						success: function(res) {
							if(res.code == 200 && roof_placement == 0) {
								layer.msg("置顶成功")
							} else if(res.code == 200 && roof_placement == 1) {
								layer.msg("取消置顶")
							} else {
								layer.msg("置顶失败")
							}
						}
					});
				},
				open_cb(index) {
					var isShow = this.isShow;
					console.log(isShow.length)
					//alert(isShow[index]);
					var arr = new Array();
					$(isShow).each(function(i) {
						arr.push(false);
					});

					arr[index] = !isShow[index];
					this.isShow = arr
					//					$('.collect_list').toggleClass('open');
					//obj.currentTarget.className='active';
				}

			}
		})
	</script>

</html>